<template>
  <div>
    <div v-if="uploadType === 0" class="cardinfo">
      <el-card shadow="hover">
      <div class="deldiv" @click.stop="onDelete">删除</div>
      <div
        :style="{ backgroundImage: `url(${getData()[0]})` }"
        class="indexBack"
      >
        <div class="disflex">
          <div class="mingpianBox">
            <!-- 头像 -->
            <img src="../../../../assets/images/profile.jpg" class="imgBox" />
          </div>
          <div class="indexFont">
            <div>姓名:</div>
            <div>公司:</div>
          </div>
        </div>
        <div style="display: flex; justify-content: flex-start;position:relative;">
          <div style="width: 300px">
            <div style="padding-top: 5px">电话:</div>
            <div style="padding-top: 5px">邮箱:</div>
            <div style="padding-top: 5px">地址:</div>
          </div>
          <div>
            <img
              :src="getData()[1]"
              style="width: 70px; height: 70px; border-radius: 5px;position:absolute;right:0;bottom:0"
            />
          </div>
        </div>
      </div>
    </el-card>
    </div>
    <div v-if="uploadType === 1" class="cardinfo">
      <el-card shadow="hover">
      <div @click.stop="onDelete" class="deldiv">删除</div>
      <!-- 五个ICON -->
      <div
        style="
          display: flex;
          justify-content: space-around;
          font-size: 14px;
          margin-top: 40px;
          min-width:350px;
        "
      >
        <div v-for="(item2, index2) in getData()" :key="index2">
          <div style="width: 70px; text-align: center;">
            <div>
              <img :src="item2" class="imgBox1" />
            </div>
            <div>{{ list2[index2] }}</div>
          </div>
        </div>
      </div>
    </el-card>
    </div>
    <div v-if="uploadType === 2" class="cardinfo">
      <el-card shadow="hover">
      <div class="deldiv" @click.stop="onDelete">删除</div>
      <!-- 列表 -->
      <div class="title">产品介绍</div>
      <div style="display: flex; justify-content: flex-start; margin-top: 20px">
        <div v-for="(item3) in uploadList || listinfo" :key="item3.text">
          <div style="margin-right: 10px">
            <div>
              <img
                :src="item3.backgroundUrl || '../../../../assets/images/profile.jpg'"
                class="isImag"
              />
            </div>
            <div v-html="item3.name || item3.text"></div>
          </div>
        </div>
      </div>
    </el-card>
    </div>

    <div v-if="uploadType === 3" class="cardinfo">
      <el-card shadow="hover">
      <!-- 行业案例 -->
      <div class="title" style="display: flex;justify-content: space-between;">
        <div>行业案例</div>
      <div @click.stop="onDelete" class="deldiv">删除</div>
      </div>
      <div style="display: flex; justify-content: flex-start; margin-top: 20px">
        <div v-for="(item4, index4) in uploadList || listinfoHang" :key="index4">
          <div style="margin-right: 10px">
            <div>
              <img
                :src="item4.backgroundUrl || '../../../../assets/images/profile.jpg'"
                class="isImag2"
              />
            </div>
            <div
              style="
                width: 100px;
                background-color: #00000068;
                text-align: center;
                padding-top: 5px;
                padding-bottom: 5px;
              "
              v-html="item4.name || item4.text"
            >

            </div>
          </div>
        </div>
      </div>
    </el-card>
    </div>

    <div v-if="uploadType === 4" class="cardinfo">
      <el-card shadow="hover">
      <div @click.stop="onDelete" class="deldiv">删除</div>
      <!-- 服务案例 -->
      <div class="title">服务客户</div>
      <div style="margin-top: 20px; font-size: 12px;">
        <div v-for="(item5, index5) in uploadList || listpeople" :key="index5">
          <div
            style="
              margin-right: 10px;
              display: flex;
              justify-content: flex-start;
              border:1px solid #ccc;
              margin-top: 10px;
              padding: 5px;
              border-radius: 5px;
            "
          >
            <div>
              <img
                :src="item5.backgroundUrl || '../../../../assets/images/profile.jpg'"
                class="isImag3"
              />
            </div>
            <div style="margin-left: 20px">
              <div v-html="item5.particulars || item5.title"></div>
              <div>{{item5.name || item5.text }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    </div>

    <div v-if="uploadType === 5" class="cardinfo">
      <el-card shadow="hover">
      <div @click.stop="onDelete" class="deldiv">删除</div>
      <!-- 关于我们 -->
      <div class="title">关于我们</div>
      <div style="margin-top: 20px; font-size: 12px">
        <div v-for="(item6, index6) in uploadList || about" :key="index6">
          <div
            style="
              margin-right: 10px;
              display: flex;
              justify-content: flex-start;
              margin-top:10px;
            "
          >
            <div>
              <img
                :src="item6.backgroundUrl || '../../../../assets/images/profile.jpg'"
                class="isImag3"
              />
            </div>
            <div style="margin-left: 20px">
              <div>{{item6.name || item6.text }}</div>
              <div v-html="item6.particulars || item6.title "></div>
              <div>{{item6.particulars || item6.aconut }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    </div>
  </div>
</template>
<script>

export default {
  name: "card",
  data() {
    return {
      listinfo: [
        {
          text: "",
        },
        {
          text: "",
        },
      ],
      list2: ["存入通讯录", "名片夹", "立即联系", "分享名片", "签署合同"],
      listinfoHang: [
        {
          text: "",
        },
        {
          text: "",
        },
        {
          text: "",
        },
      ],
      listpeople: [
        {
          text: "",
          title: "",
        },
        {
          text: "",
          title: "",
        },
        {
          text: "",
          title: "",
        },
      ],
      about: {
        text: "",
        title: "",
        aconut: "",
      },
    };
  },
  props: {
    uploadType: {
      type: Number,
      required: false
    },
    uploadData: {
      type: [Object, Array],
    },
    uploadList: {
      type: [Object, Array],
    },
  },
  mounted(){
    console.log('----------------',this.uploadList)
  },
  methods: {
    onDelete() {
      this.$emit("onDelete");
    },
    getData() {
      if ((this.uploadType === 1 || this.uploadType === 0) || !this.uploadType) {
        return this.uploadData;
      }
      return [];
    },
  },
};
</script>
